<template>
  <a-layout-sider
    width="256px"
    :trigger="null"
    collapsible
    v-model="collapsed"
    :class="['qc-sider',theme,fixSidebar?'ant-fixed-sidemenu':null]"
    :theme="theme"
  >
    <logo />
    <future-menu :menus="menus" :collapsed="collapsed" :theme="theme"></future-menu>
  </a-layout-sider>
</template>

<script>
import FutureMenu from "./FutureMenu";
import Logo from "@/components/tools/Logo";
import { mixin } from "@/utils/mixin";

export default {
  mixins: [mixin],
  components: {
    Logo,
    FutureMenu
  },
  props: {
    menus: {
      type: Array,
      required: true
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: "dark"
    }
  },
  data() {
    return {};
  }
};
</script>
<style>
.qc-sider.light .ant-menu-light {
  border-right-color: transparent;
}
.qc-sider.light {
  background-color: #fff;
  -webkit-box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}
.qc-sider.ant-fixed-sidemenu {
  position: fixed;
  height: 100%;
}
</style>
